<template>
	<view class="select-equip">
		<u-sticky bgColor="#fff">
			<view class="p-30">
				<u--input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="输入仪器名称，如介质损耗测定仪"
					border="surround" v-model="name" @confirm="getDeviceList"></u--input>
			</view>
		</u-sticky>
		<view class="p-x-30" v-if="type!='form'">
			<!-- :max="type=='form'?1:999" -->
			<u-checkbox-group v-model="selectList" placement="column" iconPlacement="right" shape="circle">
				<view class="j-between check-item" :class="[item.checked ? 'select-border' : '']"
					v-for="(item, index) in equipList" :key="index" @click.native="checkboxClick(item, index)">
					<view class="check-item-content">
						<image src="/static/icons/equip.png" style="width: 54rpx;height: 49rpx;"></image>
						<view style="margin-left: 20rpx;">
							<view class="check-item-name">{{ item.name }}</view>
							<view>型号规格:{{ item.modelNumber }}</view>
							<view>准确度:{{ item.devicePrecision }}</view>
							<view>制造厂商:{{ item.manufacturer }}</view>
						</view>
					</view>
					<u-checkbox :name="item.id" :checked="item.checked" @change="checkboxClick(item, index)"></u-checkbox>
				</view>
			</u-checkbox-group>
		</view>
		<view class="p-x-30" v-else>
			<!-- :max="type=='form'?1:999" -->
			<u-radio-group v-model="selectList[0]" placement="column" iconPlacement="right" shape="circle">
				<view class="j-between check-item" :class="[item.checked ? 'select-border' : '']"
					v-for="(item, index) in equipList" :key="index" @click.native="checkboxClick2(item, index)">
					<view class="check-item-content">
						<image src="/static/icons/equip.png" style="width: 54rpx;height: 49rpx;"></image>
						<view style="margin-left: 20rpx;">
							<view class="check-item-name">{{ item.name }}</view>
							<view>型号规格:{{ item.modelNumber }}</view>
							<view>准确度:{{ item.devicePrecision }}</view>
							<view>制造厂商:{{ item.manufacturer }}</view>
						</view>
					</view>
					<u-radio :name="item.id" :checked="item.checked" @change="checkboxClick2(item, index)"></u-radio>
				</view>
			</u-radio-group>
		</view>
		<u-empty v-if="!equipList.length" marginTop="200rpx" mode="list" icon="/static/null.png">
		</u-empty>
		<u-gap height="80" bgColor="#F7F8FA"></u-gap>
		<view class="window-bottom btns">
			<view class="flex_1" v-if="type!='form'">
				<u-checkbox-group v-model="radioValue" @change="radioChange" shape="circle">
					<u-checkbox label="全选" name="all">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="flex_1" v-else>
			</view>
			<view class="num">
				<view class="num-text">已选择{{ selectAll.length }}件</view>
				<u-button :customStyle="{ width: '250rpx' }" type="primary" text="确定" @click="onSubmit"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				radioValue: [],
				equipList: [],
				selectList: [],
				selectAll: [],
				type: '', //用于区分从故障申报来的选择
			}
		},
		onLoad(option) {
			if (option.from && option.from == 'form') {
				this.type = 'form'
			}
			this.getDeviceList()
		},
		methods: {
			async getDeviceList() {
				const {
					data
				} = await this.$api.getDeviceList({
					name: this.name,
					statusAll: 1, //正常设备
					statusStore: 1 //库里
				})
				if (this.type == 'form') {
					this.equipList = data
				} else {
					let idList = []
					if (this.selectAll.length) {
						idList = this.selectAll.map(item => item.id)
					}
					this.equipList = data.map(item => {
						if (idList.includes(item.id)) {
							item.checked = true
						}
						return item
					})
				}
			},
			// 全选
			radioChange(value) {
				if (value.length) {
					this.equipList.forEach(item => item.checked = true)
					this.selectAll = this.equipList
					return
				}
				this.equipList.forEach(item => item.checked = false)
				this.selectAll = []
			},
			// 选择仪器
			checkboxClick(data, index) {
				data.checked = !data.checked
				if (data.checked) {
					this.selectAll.push(data)
				} else {
					this.selectAll = this.selectAll.filter(item => item.id != data.id)
				}
				this.$set(this.equipList, index, data)
			},
			// 选择仪器2
			checkboxClick2(data, index) {
				data.checked = !data.checked
				this.selectList = [data.id]
				this.selectAll = [data]
				this.equipList.map((item, indexs) => {
					if (indexs == index) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
				// if (data.checked) {
				// this.selectAll=[data]
				// this.equipList[index].checked=true
				// } else {
				// 	this.selectAll = this.selectAll.filter(item => item.id != data.id)
				// }
				this.$set(this.equipList, index, data)
			},
			// 提交
			onSubmit() {
				uni.setStorageSync('selectAll', JSON.stringify(this.selectAll))
				if (this.type == 'form') {
					// 触发自定义事件并传递参数给上一页
					uni.$emit('refresh', {
						refresh: true
					});
					// 跳转回上一页
					uni.navigateBack({
						delta: 1
					});
				} else {
					uni.navigateTo({
						url: `/pages/loan/loan`
					});
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-equip {

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 40rpx;
			box-sizing: border-box
		}

		.num {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.num-text {
				font-size: 24rpx;
				color: #0E64FE;
				white-space: nowrap;
				padding-right: 20rpx;
			}
		}

		.check-item {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx 30rpx;
			border-radius: 10rpx;
			margin-top: 25rpx;
			box-sizing: border-box;
		}

		.check-item-content {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			font-size: 24rpx;
			color: #666666;
		}

		.check-item-name {
			font-size: 28rpx;
			color: #333333;
			line-height: 32rpx;
		}

		.select-border {
			border: 1rpx solid #0e64fe;
		}
	}
</style>